<template>
  <div :id="id" style="height: 100%; width: 100%;"></div>
</template>

<script>
import "echarts/theme/macarons.js";
export default {
  name: "LineBarChart",
  props: {
    id:{
      type: String,
    },
    data: {
      type: Object,
    }
  },
  data() {
    return {
    }
  },
  mounted() {
    if(this.data){
      this.drawLine(this.data);
    }
  },
  methods: {
    /**
     * 图表配置类型为dataset这种键值对的类型，请查看参考数据集的案例
     * @param data
     */
    drawLine(data) {
      // 配置图表类型
      let seriesLength = data.source_data[0].length - 1
      let series = [];
      for(let i=0;i<seriesLength;i++){
        series[i] = {
          type: 'line',
          radius:  ['40%', '70%'],
          label: {
            show: false,
            position: 'center'
          },
        }
        if(data.chart_type == '1'){
          series[i].type = 'line'
        }
        if(data.chart_type == '2'){
          series[i].type = 'bar'
        }
        if(data.chart_type == '3'){
          series[i].type = 'pie'
          series[i].emphasis = {
            label: {
              show: true,
              fontSize: 30,
              fontWeight: 'bold'
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      }
      let option = {
        title: {
          text: data.name,
          left: 'left'
        },
        tooltip: { trigger: 'item' },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true, },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar','pie'] },
            restore: { show: true },
            saveAsImage: { show: true, },
          }
        },
        dataset: {
          source: data.source_data
        },
        xAxis: {
          type: 'category',
        },
        yAxis: {},
        series: series
      };
      if(data.chart_type == '3'){
        option.legend = {
          orient: 'vertical',
          left: 'right',
          padding: [40,10,0,0]
        }
      } else {
        option.legend = {
          orient: 'horizontal',
          left: 'center',
        }
      }
      let myChart = this.$echarts.init(document.getElementById(this.id), "macarons")
      myChart.setOption(option)
      myChart.on('click',function (params){
        console.log(params)
      })
    },
  }
}
</script>

<style scoped>

</style>
